<template>
  <el-color-picker :ref="changeRef" show-alpha v-bind="getBindValue" />
</template>

<script setup lang="ts">
import type { ZColorPickerInstance, ZColorPickerProps } from '../types'

defineOptions({ name: 'ZColorPicker', inheritAttrs: false })

const props = withDefaults(defineProps<ZColorPickerProps>(), {})

const vm = getCurrentInstance()
const getBindValue = computed(() => {
  const delArr: string[] = []
  const attrs = useAttrs()
  const obj = { ...attrs }
  Object.assign(obj, props)
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const changeRef = (ColorPickerInstance: Record<string, any> | null) => {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(
      ColorPickerInstance || {},
      {} // 这里写暴露的方法
    ) as ZColorPickerInstance
  }
}
</script>

<style lang="scss" scoped></style>
